<template>
	<view>
		<scroll-view :scroll-y="true" :style="{'height': height + 'px'}" @scrolltolower="loadData">
			<slot></slot>
			<view :class="contentClass">
				<slot name="content"/>
			</view>
			<view  v-if="listModeObj.pagingTxt" class="flex items-center justify-center text-gray-99 mt-3 mb-5">
				<u-loading-icon v-if="listModeObj.pagingLoading"></u-loading-icon>
				<text class="text-sm pl-1" v-text="listModeObj.pagingTxt"></text>
			</view>
			<view v-if="listModeObj.emptyShow" class="h-full flex items-center justify-center">
				<empty-data :index="nodataPicIndex"></empty-data>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import EmptyData from './empty_data.vue'
	export default {
		components: {
			EmptyData
		},
		props:{
			height: {
				type: Number,
				default: 0
			},
			contentClass: {
				type: Array,
				default: []
			},
			nodataPicIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				listModeObj: {
					dataList: [],
					pageTotal: 0,
					pageSize: 10,
					pagingTxt: '',
					pageNum: 1,
					emptyShow: false,
					pagingLoading: false
				},
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			loadData () {
				const v = this;
				v.setPaging(2);
				if (v.listModeObj.pageTotal && (v.listModeObj.dataList.length >= v.listModeObj.pageTotal)) {
					v.setPaging(3);
				}else {
					v.$util.showLoading('加载中..')
					v.$emit('load-data', {
						pageSize: v.listModeObj.pageSize,
						pageNum: v.listModeObj.pageNum
					}, res => {
						if (res.code == '00000') {
							v.listModeObj.pageTotal = res.data.total;
							v.listModeObj.pageNum += 1;
							v.listModeObj.dataList = v.listModeObj.dataList.concat(res.data.rows)
							v.$emit('input', v.listModeObj.dataList)
						}
						v.listModeObj.emptyShow = v.listModeObj.dataList.length == 0
						v.setPaging((v.listModeObj.pageTotal > 0 && v.listModeObj.dataList.length >= v.listModeObj.pageTotal)? 3:1);
						v.$util.hideLoading()
					}, err=>{
						console.log(err)
						v.setPaging(1);
						v.$util.hideLoading()
					});
				}
			},
			dataReload () {
				this.listModeObj.dataList = []
				this.listModeObj.pageTotal = 0
				this.listModeObj.pageNum = 1
				this.loadData()
			},
			setPaging (type) {
				const v = this;
				switch (type) {
					case 1:
						v.listModeObj.pagingLoading = false;
						v.listModeObj.pagingTxt = '';
						break;
					case 2:
						v.listModeObj.pagingLoading = true;
						v.listModeObj.pagingTxt = '加载中..';
						break;
					case 3:
						v.listModeObj.pagingLoading = false;
						v.listModeObj.pagingTxt = '没有更多了';
						break;
				}
			},
		}
	}
</script>

<style scoped>
</style>
